<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用全局导航钩子</title>
	<!--引入Vue库-->
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
</head>
<body>	
<div id="app">
  <p>
    <router-link to="/">主页</router-link>
    <router-link to="/productDetails">商品详情</router-link>
    <router-link to="/shoppingCart">购物车</router-link>
  </p>
  <router-view></router-view>
</div>
<script>
	const Home = { template: '<div>打开网站主页</div>' }
    const ProductDetails = { template: '<div>打开商品详情页面</div>'}
    const ShoppingCart = { template: '<div>打开购物车页面</div>' }
    const Login = { template: '<div>请登录</div>' }
    const routes = [
      { path: '/', name:'home', component: Home,meta:{index:0}},
      { path: '/productDetails', name:'productDetails', component:ProductDetails,meta:{index:1}},
      { path: '/shoppingCart', name:'shoppingCart', component:ShoppingCart,meta:{index:2,login:true}},
      { path: '/login', name:'login', component:Login,},
    ]
    const router = new VueRouter({
      routes ,
    })
    router.beforeEach((to, from, next) => {
      if(to.meta.login){
        next('/login');
      }
      next();
    });
    router.afterEach((to, from)=>{
      document.title = to.name;
    })
    const app = new Vue({
          el:'#app',
          router
    })	  
</script>
</body>
</html>
